<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>输入框组</title>
    <link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="username"/>
            <span class="input-group-addon">.00</span>
        </div>
        <br/>
        <div class="input-group input-group-lg">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="username"/>
            <span class="input-group-addon">.00</span>
        </div>
        <br/>
        <div class="input-group input-group-sm">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="username"/>
            <span class="input-group-addon">.00</span>
        </div>
        <br/>
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox" aria-label="..."/>
                    </span>
                    <input type="text" class="form-control"/>
                </div>
            </div>


            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="radio"/>
                    </span>
                    <input type="text" class="form-control"/>
                </div>
            </div>
        </div>
        <br/>
        <br/>
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">搜索</button>
                    </span>
                    <input type="text" class="form-control" placeholder="请填写要搜索的内容"/>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="请填写要搜索的内容"/>
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">搜索</button>
                    </span>

                </div>

            </div>
        </div>
        <br/>
        <br/>
        <div class="input-group">
            <input type="text" class="form-control"/>
            <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    Action
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                </ul>
            </div>
        </div>

        <!--分裂式下拉菜单-->
        <br/>
        <br/>
        <div class="input-group">
            <input type="text" class="form-control"/>
            <div class="input-group-btn">
                <button type="button" class="btn btn-default" data-toggle="dropdown">
                    Action

                </button>
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                </ul>
            </div>
        </div>
    </div>

    <script src="jquery-1.11.1.js"></script>
    <script src="bootstrap.min.js"></script>
</body>
</html>